<template>
    <div class='left-wrap' @click='closeTabHandler'>
        <div class='slider'>
            <!-- 轮播图 -->
            <v-carousel
                hide-delimiters
                :show-arrows='false'
                :next-icon='false'
                cycle
                height='240'
                hide-delimiter-background
                show-arrows-on-hover
            >
                <v-carousel-item :src='"/image/T1.jpg"'></v-carousel-item>
                <v-carousel-item :src='"/image/T2.jpg"'></v-carousel-item>
                <v-carousel-item :src='"/image/T3.jpg"'></v-carousel-item>
                <v-carousel-item :src='"/image/T4.jpg"'></v-carousel-item>
            </v-carousel>

            <div class='tab-search'>
                <tab-search ref='tabSearch' :isViewList.sync='isViewList' :show.sync='tabIsShow'></tab-search>
            </div>
        </div>
        <view-content :list='list' @listClick='rightToHandler' :isViewList='isViewList'></view-content>
    </div>
</template>


<script>
import TabSearch from './tab_search';
import ViewContent from './view_content';
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            tabIsShow: false,
            isViewList: false,
        };
    },
    methods: {
        ...mapMutations({
            commitListState: 'viewList/commitListState',
            commitSearchData: 'searchData/commitState',
        }),
        closeTabHandler(e) {
            const target = this.$refs['tabSearch'].$el;
            if (target === e.target) {
                return;
            }
            if ((!e.target.contains(target) && !target.contains(e.target)) || e.target.contains(target)) {
                this.tabIsShow = false;
            }
        },
        rightToHandler(item) {
            this.commitListState({
                k: 'rightViewData',
                v: item,
            });
            this.commitSearchData({
                k: 'isHomeShow',
                v: false,
            });
        },
    },
    computed: {
        ...mapState({
            list: state => state.viewList.list,
            rightViewData: state => state.viewList.rightViewData,
        }),
    },
    components: {
        TabSearch,
        ViewContent,
    },
};
</script>



<style lang="scss" scoped>
.left-wrap {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow: auto;
    &::-webkit-scrollbar {
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.1);
        width: 4px;
    }
    &::-webkit-scrollbar-button {
        display: none;
    }
    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4);
        transition: all .5s ease;
        &:hover {
            background: rgba(0, 0, 0, 0.6);
            
        }
    }
    background-color: #fff;
    .slider {
        position: relative;

        .tab-search {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 95%;
            border-radius: 5px;
            overflow: hidden;
        }
    }
}
</style>

<style lang="scss">
.v-application .v-slider__thumb-label.primary {
    height: 20px !important;
    width: auto !important;
    display: inline-block;
    transform: translate(-50%, -60%) !important;
    border-radius: 3px !important;
    background-color: #5c5d5f !important;
    color: #fff;
    box-sizing: border-box;
    padding: 0px 4px;
    white-space: nowrap;
    div {
        transform: rotate(0) !important;
    }
}

.v-application {
    .tab-search {
        .v-btn-add-style {
            box-sizing: border-box !important;
            border: 1px dashed #aab2bd !important;
            background: #fff;
            min-width: 37px !important;
        }
        .v-btn.v-btn-add-style:hover {
            border: 1px solid #000 !important;
            background-color: #fff !important;
            box-shadow: 0px 0px 0px 0px #fff;
        }
        .v-btn.v-btn-add-style:hover::before {
            opacity: 0;
        }
        .v-btn.v-item--active.v-btn--active.v-btn-add-style {
            border: 1px solid rgb(26, 98, 214) !important;
        }
    }
}
</style>